<template>
  <div>
    <van-nav-bar
      title="提交订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <van-swipe-cell v-for="item in carList" :key="item.id">
        <van-card
          :price="item.price"
          :title="item.moviename"
          :thumb="item.posters"
        />
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar
      :price="sum"
      button-text="提交订单"
      @submit="onSubmit"
      tip="购买影片票后，仅限当天观看！"
      tip-icon="info-o"
    >
    </van-submit-bar>
    <!-- 支付界面 -->
    <van-overlay :show="show">
      <div class="wrapper"  @click.stop="show = false">
        <div class="block">
          <div class="py">微信支付</div>
          <div class="price">￥：{{ sum2 }}</div>
          <div class="evaluation">
            <span>支付方式</span>
            <span>余额></span>
          </div>
          <van-button class="btn" type="primary" @click.stop="pay">确认支付</van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carList: [],
      //显示支付页
      show: false,
    };
  },
  created() {
    this.getCarlist();
  },
  methods: {
    async getCarlist() {
      const { data: res } = await this.$http.get("car");
      if (res.status !== 200) return this.$message.fail("获取失败");
      this.carList = res.data;
    },
    onClickLeft() {
      this.$router.back();
    },
    onSubmit() {
      this.show = true;
    },
    async del(id) {
      const { data: res } = await this.$http.delete("car/" + id);
      if (res.status !== 200) return this.$message.fail("删除失败！");
      this.$message.success("删除成功！");
      this.getCarlist();
    },
    isShow() {
      this.show = false;
    },
    async pay(){
      let ids = []
      this.carList.filter(item=> ids.push(item.refid))
      const { data: res } = await this.$http.post('order',{ids})
      console.log(res);
      if (res.status !== 200) return this.$message.fail("支付失败！");
      this.$message.success("支付成功！");
      this.show = false;
      this.$router.push('/home')
    }
  },
  computed: {
    sum() {
      let sum = 0;
      this.carList.forEach((item) => {
        sum += item.price;
      });
      sum = sum.toFixed(2);
      sum = sum.toString().replace(".", "");
      return parseInt(sum);
    },
    sum2() {
      let sum = 0;
      this.carList.forEach((item) => {
        sum += item.price;
      });
      sum = sum.toFixed(2);
      return sum;
    },
  },
};
</script>

<style lang="less" scoped>
.van-card__price {
  color: red;
  font-weight: 600;
}

.goods-card {
  margin: 0px;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 220px;
  height: 200px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  > .price {
    font-weight: 700;
    font-size: 18px;
  }
  > .py {
    font-weight: 500;
  }
  > .evaluation {
    display: flex;
    width: 85%;
    flex-direction: row;
    justify-content: space-between;
    align-content: space-between;
    padding: 10px 0px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    font-size: 12px;
  }
  > .btn {
    border-radius: 10px;
  }
}
</style>